<template xmlns="http://www.w3.org/1999/html">
  <!-- 滚动容器 -->
  <div class="scroll-container" ref="scrollContainer">
    <!-- 消息列表 -->
    <div v-for="(item, index) in messageList" :key="index" class="message-item">
      <image v-if="item.pics" :src="item.pics" mode="aspectFill" class="message-image"/>
      <div class="message-content">
        <text class="reply-text">{{ item.replyContent }}</text>
        <div class="time-container">
          <text class="time-text">评论时间：{{ formatTime(item.recTime) }}</text>
          <text v-if="item.replyTime" class="time-text">
            回复：{{ formatTime(item.replyTime) }}
          </text>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-status">加载中...</div>
    <div v-if="!hasMore" class="no-more">没有更多数据了</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'

// 类型定义
interface MessageItem {
  id: number
  pics?: string
  replyContent: string
  recTime: string
  replyTime?: string
}

// 响应式数据
const messageList = ref<MessageItem[]>([])
const currentPage = ref(1)
const pageSize = 10
const total = ref(0)
const loading = ref(false)
const hasMore = ref(true)
const scrollContainer = ref<HTMLElement | null>(null)
let observer: IntersectionObserver | null = null

// 加载数据
const loadData = async () => {
  if (loading.value || !hasMore.value) return
  loading.value = true

  try {
    const res = await uni.request({
      url: 'http://localhost:8081/p/user/message/page',
      method: 'GET',
      data: { current: currentPage.value, size: pageSize }
    })

    if (res.data?.code === '00000') {
      const { records, total: totalCount } = res.data.data
      messageList.value = [...messageList.value, ...records]
      total.value = totalCount
      hasMore.value = messageList.value.length < total.value
      currentPage.value++
    }
  } catch (error) {
    console.error('加载失败:', error)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 时间格式化
const formatTime = (timeStr: string) => {
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm')
}

// 初始化观察器
const initObserver = () => {
  observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !loading.value) {
        loadData()
      }
    })
  }, {
    root: scrollContainer.value,
    threshold: 0.8
  })

  const sentinel = document.createElement('div')
  scrollContainer.value?.appendChild(sentinel)
  observer.observe(sentinel)
}

onMounted(async () => {
  await loadData()
  initObserver()
})

onUnmounted(() => {
  observer?.disconnect()
})
</script>

<style scoped lang="scss">
.scroll-container {
  height: 100vh;
  overflow-y: auto;
  padding: 20rpx;

  .message-item {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    display: flex;
    gap: 20rpx;

    .message-image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      flex-shrink: 0;
    }

    .message-content {
      flex: 1;
      .reply-text {
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
      }
      .time-container {
        margin-top: 15rpx;
        .time-text {
          font-size: 24rpx;
          color: #999;
          margin-top: 8rpx;
        }
      }
    }
  }

  .loading-status, .no-more {
    text-align: center;
    padding: 20rpx;
    font-size: 24rpx;
    color: #666;
  }
}
</style>
